<template>
	<view class="uiwu">
		<view class="uiwu-header">
			<view class="title" v-if="item.refund_status == 1">等平台审核</view>
			<view class="title" v-if="item.refund_status == 3">审核不通过</view>
			<view class="title" v-if="item.refund_status == 2 && item.is_refund == 0">售后完成</view>
			<view class="title" v-if="item.refund_status == 2 && item.is_refund == 1">待寄回商品</view>
			<view class="title" v-if="item.refund_status == 4">待平台收货</view>
			<view class="title" v-if="item.refund_status == 5">售后完成</view>
			<view class="tips">很抱歉给您带来不便，请谅解</view>
		</view>
		<view class="uiwu-location uiwu-flex-align">
			<image src="/static/location.png" mode="widthFix"></image>
			<view class="in uiwu-flex-column" v-if="!item.grab_prize_order">
				<text>{{item.real_name}} {{item.user_phone}}</text>
				<text>{{item.user_address}}</text>
			</view>
			<view class="in uiwu-flex-column" v-else>
				<text>{{item.grab_prize_order?.real_name}} {{item.grab_prize_order?.user_phone}}</text>
				<text>{{item.grab_prize_order?.user_address}}</text>
			</view>
			<view class="btn uiwu-flex-center" @tap="copyText(item)">复制</view>
		</view>
		<view class="uiwu-goods uiwu-flex-space">
			<image :src="item.image || item.product_image" mode="aspectFill"></image>
			<view class="name">{{item.store_name || item.product_name}}</view>
			<view class="num">x1</view>
		</view>
		<view class="uiwu-list">
			<view class="item uiwu-flex-space">
				<text>售后时间</text>
				<text>{{uiwu.formatTimestamp(item.receipt_time ? item.receipt_time * 1000 : item.refund_time * 1000)}}</text>
			</view>
			<view class="item uiwu-flex-space">
				<text>售后原因</text>
				<text>{{item.refund_reason}}</text>
			</view>
			<view class="item uiwu-flex-space">
				<text>售后凭证</text>
				<view class="image uiwu-flex">
					<image v-for="(v,index) in item.refund_proof" :key="index" :src="v" mode="aspectFill"></image>
				</view>
			</view>
			<view class="item uiwu-flex-space" v-if="item.delivery_name">
				<text>售后物流</text>
				<text>{{item.delivery_name}}</text>
			</view>
			<view class="item uiwu-flex-space" v-if="item.delivery_id">
				<text>物流单号</text>
				<text>{{item.delivery_id}}</text>
			</view>
			<view class="item uiwu-flex-space" v-if="item.refund_remarks && item.refund_status == 3">
				<text>驳回原因</text>
				<text style="color: #EF821E;">{{item.refund_remarks}}</text>
			</view>
		</view>
		<uiwu-footer v-if="item.refund_status == 2 && item.is_refund == 1">
			<view class="uiwu-footer uiwu-flex-align">
				<text class="uiwu-flex-center" @tap="showModel = true">退货信息</text>
			</view>
		</uiwu-footer>
		<uiwu-popup-model v-model="showModel" @confirm="confirm">
			<view class="item">
				<picker mode="selector" :range="deliverylist" range-key="value" @change="changePicker">
					<view class="uiwu-flex-space picker">
						<input type="text" disabled v-model="refundData.refund_delivery_name" placeholder="请选择">
						<uiwu-icon type="arrowdown" size="18" color="#999"></uiwu-icon>
					</view>
				</picker>
				<input type="text" v-model="refundData.refund_express" placeholder="请填写物流单号">
			</view>
		</uiwu-popup-model>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { uiwu } from '@/config/config';
	import { ref } from "vue";
	import { integralOrderDetail } from '@/api/api';
	import { prizeinfo , grabPrizeRefund , integralOrderRefund , expresslist } from '@/api/prize';
	const showModel = ref<boolean>(false)
	const tpyes = ref(0)
	const item = ref({})
	const deliverylist = ref<Array<object>>([])
	const refundData = ref({
		id:'',
		refund_delivery_name:'',
		refund_express:''
	})
	const openAppl = () : void =>{
		uiwu.openWindow('/pages/AfterSales/AfterSales')
	}
	const confirm = async () : Promise<any> => {
		if(!refundData.value.refund_delivery_name) return uiwu.toast('请选择物流公司')
		if(!refundData.value.refund_express) return uiwu.toast('请填写快递单号')
		const result = tpyes.value == 0 ? await integralOrderRefund(refundData.value) : await grabPrizeRefund(refundData.value)
		if(!result) return
		showModel.value = false
		uiwu.toast('提交成功')
		getOrderInfo(refundData.value.id)
	}
	const changePicker = ({detail:{value}}) => {
		refundData.value.refund_delivery_name = deliverylist.value[value].value
	}
	const getOrderInfo = async (id:string|number) => {
		const { data } = tpyes.value == 0 ? await integralOrderDetail(id) : await prizeinfo(id);
		item.value = data
	}
	const copyText = (item) => {
		const { grab_prize_order } = item
		if(grab_prize_order){
			const {real_name,user_phone,user_address} = grab_prize_order
			uiwu.copy(`${real_name} ${user_phone} ${user_address}`)
		}else{
			uiwu.copy(`${item.real_name} ${item.user_phone} ${item.user_address}`)
		}		
	}
	const getExpresslist = async () : Promise<any> => {
		const { data } = await expresslist();
		deliverylist.value = data
	}
	onLoad(({id,type})=>{
		tpyes.value = type
		refundData.value.id = id
		getOrderInfo(id)
		getExpresslist()
	})
</script>

<style lang="scss" scoped>
	page{
		background-color: #e6e6e6;
	}
	.uiwu{
		background: url('../../static/orderbg.png') no-repeat 0 0;
		background-size: 100% 258rpx;
	}
	::v-deep .uiwu-popup-box{
		height: 644rpx;
		background-image: url('../../static/644pop.png');
		.content{
			min-height: 88rpx;
			height: auto;
			padding: 0 54rpx 0 38rpx;
		}
	}
	.uiwu-location{
		width: 702rpx;
		height: 146rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		padding: 0 18rpx;
		position: relative;
		image{
			width: 40rpx;
			margin-right: 18rpx;
		}
		.in{
			text{
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
				&:nth-child(1){
					font-size: 28rpx;
					font-weight: 500;
					color: #231815;
					margin-bottom: 10rpx;
				}
			}
		}
		.btn{
			width: 80rpx;
			height: 40rpx;
			border-radius: 20rpx;
			border: 1rpx solid #EF821E;
			position: absolute;
			right: 24rpx;
			top: 30rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #EF821E;
		}
	}
	.item{
		.picker{
			width: 100%;
			height: 90rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 3rpx solid #231815;
			margin-bottom: 24rpx;
			padding: 0 24rpx;
			input{
				font-size: 28rpx;
				width: 100%;
				text-align: left;
			}
		}
		>input{
			width: 100%;
			height: 90rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 3rpx solid #231815;
			padding: 24rpx;
			font-size: 28rpx;
			text-align: left;
		}
	}
	.uiwu-header{
		width: 100%;
		height: 156rpx;
		padding: 40rpx 50rpx 0;
		.title{
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
		.tips{
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 6rpx;
		}
	}
	.uiwu-goods{
		width: 702rpx;
		height: 168rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto;
		padding: 0 18rpx;
		image{
			width: 120rpx;
			height: 120rpx;
			border-radius: 16rpx;
		}
		.name{
			font-size: 28rpx;
			font-weight: bold;
			color: #444444;
			flex: 1;
			padding: 0 24rpx;
		}
		.num{
			font-size: 28rpx;
			font-weight: bold;
			color: #444444;
		}
	}
	.uiwu-list{
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto;
		padding: 16rpx 24rpx;
		.item{
			padding: 16rpx 0;
			align-items: flex-start;
			text{
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
				&:nth-child(1){
					white-space: nowrap;
					margin-right: 20rpx;
				}
				&:nth-child(2){
					font-size: 28rpx;
					font-weight: 400;
					color: #231815;
					text-align: right;
				}
			}
			.image{
				flex: 1;
				flex-wrap: wrap;
				image{
					margin-right: 20rpx;
					width: 160rpx;
					height: 160rpx;
					border-radius: 16rpx;
					margin-bottom: 20rpx;
					&:nth-child(3n + 0){
						margin-right: 0;
					}
				}
			}
		}
	}
	.uiwu-footer{
		width: 100%;
		justify-content: flex-end;
		padding: 20rpx 24rpx 16rpx;
		background-color: #fff;
		text{
			width: 220rpx;
			height: 72rpx;
			background: #EF821E;
			border-radius: 36rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
